<template>
  <el-form class="tl-form" ref="form" label-width="150px">
      <div class="tl-form-line-title2" v-if="feedbackList.length > 0 || queryParam.qry_istaskfeedback" style="margin-bottom: 20px">
      <el-row>
        <el-col :span="6">任务反馈</el-col>
        <el-col :span="18">
          <el-form-item label="反馈类别" style="float: right">
            <el-select v-model="queryParam.qry_istaskfeedback" placeholder="请选择" clearable @change="changeShowMore">
              <el-option v-for="item in codeModel.feedbackyesnolist" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      </div>
    <el-timeline>
      <el-timeline-item v-for="(item, index) in feedbackList" :key="index" color="#0A6ED2">
          <div v-if="item.istaskfeedback === '1'">
            <div>
              <span>任务反馈&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span style="color: #888">{{item.username}}于{{formatDate(item.submitdate)}}填写</span>
            </div>
            <el-row style="margin-top: 5px">
              <el-col :span="24">
                <el-form-item label="反馈细节" label-width="100px">
                  <el-input v-model="item.taskfeedbackdetail" type="textarea" :autosize="{ minRows:1, maxRows:3 }" :disabled="true"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="任务进度" label-width="100px">
                  <el-input v-model="item.taskschedule" class="unitInputNumber" :disabled="true"/><span class="unitSpan">%</span>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div v-if="item.istaskfeedback === '0'">
            <div>
              <span>差距与改进&nbsp;&nbsp;&nbsp;&nbsp;</span>
              <span style="color: #888" v-if="item.submitdate">{{item.username}}于{{formatDate(item.submitdate)}}填写</span>
            </div>
            <el-row>
              <el-col :span="24" style="margin-top: 5px" >
                <el-form-item label="差距分析" label-width="100px">
                  <el-input v-model="item.gapanalysis" type="textarea" maxlength="1000" show-word-limit :autosize="{ minRows:1, maxRows:3 }" :disabled="!fromGantt || !isPM"/>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="改进计划" label-width="100px">
                  <el-input v-model="item.managerplan" type="textarea" maxlength="1000" show-word-limit :autosize="{ minRows:1, maxRows:3 }" :disabled="!fromGantt || !isPM"/>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
      </el-timeline-item>
      <el-button type="text" @click="doChangeFeedBackList" v-if="showChangeButton" size="medium">{{ buttontext }}</el-button>
      <span v-if="buttonflag && showChangeButton" style="color: #888">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;共{{ totalCount }}条</span>
    </el-timeline>
  </el-form>
</template>

<script>
/** mixins */
import { mixin_edit } from '@tapui/mixins/mixin_edit'
/** 工具类 */
import { putAction, getAction, postAction, deleteAction } from "@tapui/utils/http"
import { formatDate } from '@tapui/utils/date'
import { validateNull } from '@tapui/utils/validate'
/** VUE配置 */
export default {
  mixins: [mixin_edit],
  data() {
    return {
      urlPrefix: '/mpm/projectTaskFeedback/',
      url: {
        list: '/mpm/projectTaskFeedback/list'
      },
      feedbackList: [],
      feedbackList2: [],
      tempfeedbackList: [],
      buttonflag: true,
      totalCount: 0,
      taskId: 0,
      queryParam: {}
    }
  },
  props: {
    fromGantt: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    showChangeButton() {
      return this.feedbackList2.length > 0
    },
    buttontext() {
      return this.buttonflag ? '查看更多任务反馈' : '隐藏'
    },
    isPM() {
      if (this.$store.getters.projectroles) {
        return this.$store.getters.projectroles.indexOf('pm') > -1 && !this.loading
      } else {
        return false
      }
    }
  },
  methods: {
    queryTaskFeedbackList(taskId, qry_param) {
      // 初始化data值
      this.taskId = taskId
      this.feedbackList = []
      this.feedbackList2 = []
      this.buttonflag = true
      this.totalCount = 0
      if (validateNull(qry_param)) {
        this.queryParam = {}
      }
      let param = {
        qry_taskid: taskId,
        qry_state: 9,
        sidx: 'submitdate',
        sord: 'desc',
        currentPage: 1,
        pageSize: 50,
        qry_istaskfeedback: qry_param
      }
      getAction(this.url.list, param).then((res) => {
        if (res.success) {
          if (res.result.dataList.length > 0) {
            if (res.result.dataList.length > 3) {
              this.feedbackList = res.result.dataList.slice(0, 3)
              this.feedbackList2 = res.result.dataList
            } else {
              this.feedbackList = res.result.dataList
            }
            this.totalCount = res.result.totalCount
            this.$emit('resize')
          }
        } else {
          this.$tap.alert(res.message, 'warning')
        }
      }).catch((err) => {
        this.$tap.alert(err.message, 'warning')
      })
    },
    formatDate(date) {
      return formatDate(new Date(date ? date.toString().replace(/\-/g, "/") : date), "yyyy-MM-dd HH:mm")
    },
    doChangeFeedBackList() {
      this.tempfeedbackList = this.feedbackList
      this.feedbackList = this.feedbackList2
      this.feedbackList2 = this.tempfeedbackList
      this.buttonflag = !this.buttonflag
    },
    changeShowMore() {
      this.queryTaskFeedbackList(this.taskId, this.queryParam.qry_istaskfeedback)
    }
  }
}
</script>
<style scoped lang="scss">
.tl-form .tl-form-line-title2 {
  font-size: 18px;
  font-weight: bold;
  height: 32px;
  line-height: 32px;
  border-left: 4px solid #409eff;
  padding-left: 8px;
  margin: 17px 0 12px 15px;
  overflow: hidden;
  &.sub-title {
    font-weight: normal;
    border-left: none;
    padding-left: 12px;
    font-size: 18px;
    color: black;
  }
  .toolbar {
    float: right;
    .el-button {
      padding: 0;
      line-height: 20px;
    }
  }
  .simple-pager {
    font-size: 14px;
    font-weight: normal;
    color: #777;
    display: inline-block;
    margin-left: 20px;
    i {
      color: #c0c0c0;
    }
    i.on {
      cursor: pointer;
      color: #409eff;
    }
  }
}
</style>
